
<template>
  <!-- <div>本地商品库</div> -->
  <div class="shop">
    <div class="top">
      <el-button size='small'
        type='primary'
        @click="exportWoodsStore">导出数据</el-button>

      <el-button class='search'
        size='small'
        type='primary'
        @click="searchSupplyChain">搜索</el-button>
      <el-input class="search input"
        size='small'
        v-model="product_no"
        placeholder="输入商品编号查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="title"
        placeholder="输入商品名称查询"
        clearable></el-input>

      <el-select style="width:130px;"
        size='small'
        v-model="on_sale"
        filterable
        class="search"
        placeholder="商品状态">
        <el-option label="全部"
          :value="0">全部</el-option>
        <el-option label="售卖中"
          :value="5"></el-option>
        <el-option label="未上架"
          :value="15"></el-option>
      </el-select>

        <el-select style="width:180px;"
          size='small'
          v-model="cate_id"
          filterable
          class="search"
          placeholder="请选择分类">
          <el-option v-for="item in categoryList"
            :key="item.id"
            :label="item.cate_name"
            :value="item.id"></el-option>
        </el-select>
   
    </div>
    <el-table :data="tableData"
      style="width:100%"
      max-height="720"
      :cell-style="tc"
      :header-cell-style="tccolor">

      <el-table-column label='商品编号'
        prop='product_no'
        width='120'></el-table-column>
         <el-table-column label='商品id'
        prop='id'
        ></el-table-column>
      <el-table-column label='商品名称'
        prop='title'
        width='210'></el-table-column>
      <el-table-column label='商品图片'
        width='180'>
        <template slot-scope="scope">
          <div class="img">
            <img :key="scope.row.ID"
              style="width:100px;"
              :src="scope.row.img_url ? scope.row.img_url : errorImg"
              alt />
          </div>
          <p class="more"
            @click="lookMoreShop(scope.row.product_no)">（更多）</p>
        </template>
      </el-table-column>
      <el-table-column label='商品分类'
        prop='cate_name'
        width='140'></el-table-column>
      <el-table-column label='供货成本价'>
        <template slot-scope="scope">
          <p>¥ {{scope.row.supply_min_price}}</p>
        </template>
      </el-table-column>
      <el-table-column label='运费成本'>
        <template slot-scope="scope">
          <p>¥ {{scope.row.supply_freight_price}}</p>
        </template>
      </el-table-column>
      <el-table-column label='销售价'>
        <template slot-scope="scope">
          <p>¥ {{scope.row.price}}</p>
        </template>
      </el-table-column>
      <el-table-column label='红包抵扣'>
        <template slot-scope="scope">
          <p>¥ {{scope.row.red_packet_discount_price}}</p>
        </template>
      </el-table-column>
      <el-table-column label='商品库存'
        prop='stock'></el-table-column>
      <el-table-column label='排序'
        prop='order_sort'></el-table-column>
      <el-table-column label='商品SKU'>
        <template slot-scope="scope">
          <p class="more"
            @click="watchSkuDetail(scope.row.product_no)">查看</p>
        </template>
      </el-table-column>
      <el-table-column label="推荐">
        <template slot-scope="scope">
           <i   @click="recommendShopStore(scope.row.id,scope.row.on_sale)" class="el-icon-circle-check rec_success" v-if='scope.row.is_recommend == 1'></i>
           <i   @click="recommendShopStore(scope.row.id,scope.row.on_sale)" class="el-icon-circle-close rec_failure" v-else></i>
        </template>
      </el-table-column>
      <el-table-column label='状态' prop='on_sale_word'>
        <!-- <template slot-scope="scope">
          <p v-if='scope.row.status==1'>未上架</p>
          <p v-if='scope.row.status==0'>上架中</p>
        </template> -->
      </el-table-column>
      <el-table-column label='选品操作'
        fixed='right'
        width='320'>
        <template slot-scope="scope">
          <el-button type='primary'
            size='mini'
            @click="selectShopToStore(scope.row.product_no)">编辑</el-button>
          <el-button v-if='scope.row.on_sale == 15'
            size='mini'
            type='primary' @click="updateStoreShop(scope.row.product_no)">上架</el-button>
          <el-button v-if='scope.row.on_sale == 5'
            size='mini'
            type='danager' @click="updateDownStoreShop(scope.row.product_no)">下架</el-button>
          <el-button size='mini'
            @click="gotoSaleDaily(scope.row.id)">销售日志</el-button>
          <el-button size='mini'
            @click="deleteWoods(scope.row.product_no)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <!--商品SKU信息-->
    <jdialog title="商品SKU信息"
      :visible.sync="isShowSKUInformtion"
      width="800px">
      <skudetail :visible="isShowSKUInformtion"
        :currentId="skuId"
        @close="isShowSKUInformtion = false"
        @showSkuInfoDetail="certainshowSKUInfordetail"></skudetail>
    </jdialog>

    <!--同步商品库-->
    <!-- <jdialog title="商品数据同步" :visible.sync="isShowSynchronism" width="500px">
      <div class="syncdata">
         <div class='sync-load' v-loading="loading"></div>
         <div class="sync-ing">正在同步中，请勿关闭</div>
        <div class="sync_num">已更新商品总数：{{syncShopNum}}件</div>
      </div>
    </jdialog> -->

       <!--商品图片  :n="img_arr.length"-->
    <jdialog title="商品图片查看" :visible.sync="isShowShopImg" width="640px">
      <div class="sku_pic">
        <div v-for='(item,index) in img_arr' :key="index" class="main_sku">
          <img 
              style="width:160px;height:160px;"
              class="sku_pic_margin"
              :src="item? item : errorImg"
              alt />
        <p v-if='index ==0' class="main_img">商品主图</p>
        <p v-else class="other_img main_img">商品轮播图</p>
        </div>
      </div>
       
    </jdialog>
  </div>
</template>

<script>
import errorImg from "@/assets/images/error_img.png";
import skudetail from './skudetailInfor';
import {selfProductSearchList,
        supplyProductImgList,
        selfProductOnsaleUpdate,
        supplyproductCateList,
        selfProductRemove,
        supplyRecommendProduct} from "@/api/autarky";
import { API_BASE_URL } from "@/config";
// import uploadImg from "@/components/uploadImg";
export default {
  components: {
    // uploadImg
    skudetail
  },
  data () {
    return {
      title: '',
      product_no: '',
      cate_id:'',
      on_sale: '',
      is_export:0,
      tableData: [],
      errorImg,
      page: 1,
      size: 20,
      total: 0,

      //商品SKU信息
      isShowSKUInformtion: false,
      skuId: '',

      //商品图片查看
      isShowShopImg:false,
      img_arr:[],

      categoryList:[]

    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
  
           vm.getselfProductSearchListData()
    })
  },
  mounted () {
   this.getsupplyproductCateListData()
   this.getselfProductSearchListData()
  },
  methods: {
    selectShopToStore (id) {
      this.$router.push({
         path:'./addshopTostore',
         query: { type:2,product_no:id}
       })
    },
    gotoSaleDaily(id){
      this.$router.push({
         path:'./privateorderlist',
         query: {product_id:id}
       })
    },
    searchSupplyChain () {
      this.page = 1;
      this.getselfProductSearchListData()
    },
    exportWoodsStore () {
      this.is_export = 1
      this.getselfProductSearchListData()
    },

    deleteWoods (id) {
      this.$confirm('确定删除该商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.getselfProductRemoveData(id)
      }).catch(() => {
        console.log('cancel')
      });
    },
    pageChange (page) {
      console.log(page)
      this.page = page;
      //申请更多数据
      this.getselfProductSearchListData()
    },
    lookMoreShop (product_no) {
      this.getsupplyProductImgListData(product_no)
      this.isShowShopImg = true
      
    },
    watchSkuDetail (id) {
      this.isShowSKUInformtion = true
      this.skuId = id
    },
    certainshowSKUInfordetail () {
      this.isShowSKUInformtion = false
    },

   updateStoreShop(product_no){
     this.getselfProductOnsaleUpdateData(5,product_no)
   },
   updateDownStoreShop(product_no){
       this.getselfProductOnsaleUpdateData(15,product_no)
   },
   recommendShopStore(id,on_sale){
      if(on_sale === 15){
         this.$message.error('本商品已经下架,不能推荐')
         return
      }else{
        this.getsupplyRecommendProductData(id)
      }
      
      
   },
    //获取分类列表
    async getsupplyproductCateListData () {
 
      var url = "id=&cate_name="
      let res = await supplyproductCateList(url)
      if (res.code === 10000) {
        this.categoryList = res.data.data
      } else {
        this.$message.error(res.message)
      }
    },
    async getselfProductSearchListData(){
      if(this.on_sale == 0){
        this.on_sale = ''
      }
      var str  = 'product_no='+this.product_no+
                 '&title='+this.title+
                 '&on_sale='+this.on_sale+
                 '&is_export='+this.is_export+
                 '&cate_id='+this.cate_id+
                 '&page='+this.page+
                 '&size='+this.size
      let res =  await selfProductSearchList(str)
      if(res.code === 10000){
       
        if(this.is_export === 1) {
        this.is_export = 0
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data.download_token}`
        );
        return;
      }else{
        this.tableData = res.data.data
        this.total   = res.data.total
      }
      }else{
        this.is_export = 0
        this.$message.error(res.message)
      }
    },
      //查看sku图片
    async getsupplyProductImgListData(product_no){
      let res = await supplyProductImgList(product_no)
      if(res.code === 10000){
        this.img_arr = res.data
      }else{
        this.$message.error(res.message)
      }
    },

    //更新上下架状态
    async getselfProductOnsaleUpdateData(onsale,product_no){
      var form = {'on_sale':onsale}
      let res  = await selfProductOnsaleUpdate(product_no,form)
         if(res.code === 10000){
           this.$message.success(res.message)
           this.getselfProductSearchListData()
         }else{
           this.$message.error(res.message)
         }
    },
    //移除数据
    async getselfProductRemoveData(product_no){
      let  res = await selfProductRemove(product_no)
      if(res.code === 10000){
        this.$message.success(res.message)
        this.getselfProductSearchListData()
      }else{
        this.$message.error(res.message)
      }
    },

    //点击推荐或者不推荐
    async getsupplyRecommendProductData(product_no){
        let res = await supplyRecommendProduct(product_no)
         if(res.code === 10000){
           this.$message.success(res.message)
           this.getselfProductSearchListData()
         }else{
           this.$message.error(res.message)
         }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }

}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }
  .img {
    float: left;
  }
  .more {
    width: 60px;
    float: right;
    line-height: 100px;
    color: #f4222d;
    cursor: pointer;
  }
  .pagination {
    float: right;
    margin-top: 12px;
  }

  .syncdata {
    width: 100%;
    height: 300px;
    .sync-load {
      width: 100%;
      height: 140px;
      margin-top: 20px;
    }
    .sync-ing {
      text-align: center;
      color: #999999;
      font-size: 12px;
    }
    .sync_num {
      text-align: center;
      font-size: 12px;
      margin-top: 15px;
    }
  }

  .sku_pic{
    padding: 12px 20px;
    .sku_pic_margin{
      margin: 12px  12px;
    }
    .main_sku{
      position: relative;
      float: left;
    }
    .main_img{
      position: absolute;
      bottom: 0;
      left: 12px;
      background-color: #f5f5f5;
      color: #f4222d;
      text-align: center;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
      width: 160px;
    }
    .other_img{
      color: rgb(71, 255, 47);
    }
  }
  .rec_success{
      font-size: 40px;
      color: green;
  }
  .rec_failure{
     color: #f4222d;
     font-size: 40px;
  }
}
</style>